<!DOCTYPE html>
<html lang="en">
    <head>
	    <meta charset="utf-8">
	    <title>传智播客·黑马程序员</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	    
	    <meta name="apple-mobile-web-app-capable" content="no">
	    <meta name="apple-mobile-web-app-status-bar-style" content="pink">

	     <link rel="stylesheet" href="./css/base.css">
	     <link rel="stylesheet" href="./css/conment.css">
	     <link rel="stylesheet" href="./fonts/iconfont.css">
	     <link rel="stylesheet" href="./css/swiper.min.css">
	     <link rel="stylesheet" href="./css/index.css">

	</head>
    <body>
		<div class="header">
			<h1 class="mui-title">传智播客.黑马程序员Vue.js</h1>
		</div>
		<div class="content">

			<!-- 轮播图部分 -->
			<div class="swiper-container">
			    <div class="swiper-wrapper">
				    <div class="swiper-slide">
				      	<a href="#">
				        	<img src="./picture/banner1.jpg">
						</a>
					</div>
					<div class="swiper-slide">
				      	<a href="#">
				        	<img src="./picture/banner2.jpg">
						</a>
				  	</div>
			    </div>
			    <div class="swiper-pagination"></div>
  			</div>
  			<!-- 轮播图部分 -->
			<!-- 菜单导航部分 -->
			<ul class="menu">
				<li><a href="pages/newslist.html"><img src="./images/1cd.png"><p>新闻资讯</p></a></li>
				<li><a href=""><img src="./images/2cd.png"><p>图片分享</p></a></li>
				<li><a href=""><img src="./images/3cd.png"><p>商品购买</p></a></li>
				<li><a href=""><img src="./images/4cd.png"><p>留言反馈</p></a></li>
				<li><a href=""><img src="./images/5cd.png"><p>视频专区</p></a></li>
				<li><a href=""><img src="./images/6cd.png"><p>联系我们</p></a></li>
			</ul>
			<!-- 菜单导航部分 -->
		</div>

			<!-- 底部导航部分 -->
			<div class="nav">
				<a href="index.html" class="blue"><span class="iconfont">&#xe61c;</span><p class="">首页</p></a>
				<a href="pages/goods.html"><span class="iconfont">&#xe61d;</span><p class="">商品</p></a>
				<a href="pages/shoppingcar.html"><span class="iconfont">&#xe65c;</span><p class="">购物车</p></a>
				<a href="pages/mycenter.html"><span class="iconfont">&#xe614;</span><p class="">个人中心</p></a>
			</div>
			<!-- 底部导航部分 -->
    </body>
</html>
 <script src="./js/swiper.min.js"></script>
 <script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        // 如果需要分页器
        pagination: {
        	el: '.swiper-pagination',
      	},

        autoplay: {
  			  delay: 1000,//1秒切换一次
  		},

    });



  </script>